<template>
  <div class="study-plan">
    <van-nav-bar
      title="知识资源库"
      placeholder
      fixed
      left-arrow
      @click-left="back"
    />
    <div class="study-plan__content">
      <div class="search">
        <van-search v-model="value" placeholder="请输入搜索关键词" />
      </div>
      <div class="draw-item">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1" />
          <van-dropdown-item v-model="value2" :options="option2" />
        </van-dropdown-menu>
      </div>
    </div>
    <div class="list">
      <BaseFileCard :objData="objData" />
    </div>
  </div>
</template>
<script>
import BaseFileCard from "@/components/base-file-card.vue";
const getImg = (name) => {
  return `/src/assets/images/${name}.png`;
};
export default {
  components: {
    BaseFileCard,
  },
  data() {
    return {
      value: "",
      value1: 0,
      value2: "a",
      option1: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      option2: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
      objData: [
        {
          imgUrl: getImg("wjj"),
          title: "文件名称文件名称文件名称",
          name: "郭太猛",
          time: "2022-02-22 12:22",
        },
        {
          imgUrl: getImg("zip"),
          title: "文件名称文件名称文件名称",
          name: "郭太猛",
          time: "2022-02-22 12:22",
        },
        {
          imgUrl: getImg("jpg"),
          title: "文件名称文件名称文件名称",
          name: "郭太猛",
          time: "2022-02-22 12:22",
        },
        {
          imgUrl: getImg("png"),
          title: "文件名称文件名称文件名称",
          name: "郭太猛",
          time: "2022-02-22 12:22",
        },
        {
          imgUrl: getImg("zip1"),
          title: "文件名称文件名称文件名称",
          name: "郭太猛",
          time: "2022-02-22 12:22",
        },
      ],
    };
  },
  methods: {
    back() {
      window.history.back();
    },
  },
};
</script>
<style lang="scss" scoped>
.study-plan {
  min-height: 100vh;
  ::v-deep(.van-nav-bar__placeholder) {
    background: #ffffff;
  }
  &__content {
    padding: 12px 16px 0;
    .search {
      background: #f4f6fa;
      border-radius: 12px;
      height: 40px;
    }
    ::v-deep(.van-search) {
      padding: 3px 0 0;
    }
    ::v-deep(.van-field__control::placeholder) {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #b9bdbd;
      line-height: 20px;
      text-align: left;
      font-style: normal;
    }
    ::v-deep(.van-dropdown-menu__bar) {
      box-shadow: none;
      width: 55%;
    }
    ::v-deep(.van-dropdown-menu__item) {
      justify-content: left;
      width: 30%;
    }
    ::v-deep(.van-dropdown-item__option) {
      background: #ffffff;
    }
    ::v-deep(.van-ellipsis) {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #272b2d;
      line-height: 20px;
      text-align: left;
      font-style: normal;
    }
    .draw-item {
    }
  }
  .list {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 15px 17px;
  }
  .tabbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(0px);
    height: 50px;
  }
}
</style>
